﻿<template id="single_icon_select_template">
    <div class="single_icon_select">
        <el-input v-bind="$attrs" :clearable="true" v-on:click="dialogVisible=true" v-on:clear="clear">
            <template #append>
                <el-button :icon="showIcon($attrs.modelValue)" v-on:click="dialogVisible=true"></el-button>
            </template>
        </el-input>
        <el-dialog v-model="dialogVisible" title="选择图标" width="642px" :append-to-body="true">
            <el-input v-model="inputValue" placeholder="搜索图标" prefix-icon="Search" v-on:input="search"></el-input>
            <el-scrollbar v-if="searchResult.length">
                <div class="single_icon_select_list">
                    <div v-for="icon in searchResult" :key="icon" class="single_icon_select_item" v-on:click="selectIcon(icon)">
                        <component :is="icon"></component>
                    </div>
                </div>
            </el-scrollbar>
            <el-empty v-else description="未搜索到您要找的图标~"></el-empty>
        </el-dialog>
    </div>
</template>
<script type="text/javascript">
    var single_icon_select = {
        template: "#single_icon_select_template",
        data() {
            return {
                dialogVisible: false,
                icons: [],
                searchResult: [],
                inputValue: null
            }
        },
        props: [],
        methods: {
            init() {
                this.searchResult = this.icons = Object.keys(ElementPlusIconsVue);
            },
            clear() {
                this.$emit("update:modelValue", null);
            },
            showIcon(val) {
                return this.icons.find(m => m == val) || "empty";
            },
            selectIcon(val) {
                this.$emit("update:modelValue", val);
                this.dialogVisible = false;
            },
            search(val) {
                if (val) {
                    this.searchResult = this.icons.filter(m => m.toLowerCase().includes(val.toLowerCase()));
                }
                else { this.searchResult = this.icons; }
            }
        },
        mounted() { this.init(); }
    };
</script>